<script lang="ts" setup>
import { showToast } from "vant"
import slideVerify from "../components/LoginSlide.vue";
import { ref, computed } from "vue";
import { useRouter } from 'vue-router'

const router = useRouter()

const showSlide = ref(false)
const showBtn = ref(false)
const showLoginBtn = ref(false)
const codeShow = ref(false)
const codeinf = ref(false)
const phoneCode = ref("")
const codeNum = ref("")
const count = ref(60)

const changeShow = (e:any) => {
    showSlide.value = e
    codeShow.value = true
    showLoginBtn.value = true

    const TIME_COUNT = 60;
    let timer = 0 //定义变量 存放setInterval id
    let timeInterval = 0 //定义变量 存放setInterval id

    codeinf.value = true;
    //开启定时器
    timeInterval = setInterval(() => {
        codeinf.value = false;
        clearInterval(timeInterval);
        timeInterval = 0
        console.log("验证码："+RNum.value.trim());
    }, 1000 * 5);
    
    if (!timer) {
        count.value = TIME_COUNT;
        codeShow.value = true;
        timer = setInterval(() => {
            if (count.value > 0 && count.value <= TIME_COUNT) {
                count.value--;
            } else {
                codeShow.value = false;
                clearInterval(timer);
                timer = 0;
            }
        }, 1000);
    }
}

const confirmPhone = () => {
    showBtn.value = false
    let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
    if (reg.test(phoneCode.value)) {
        showBtn.value = true
    }
}

const confirmcodeNum = () => {
    let a = codeNum.value.trim()
    let b = RNum.value.trim()
    if (a === b) {
        showToast('登录成功')

        let phone = phoneCode.value
        localStorage.setItem('token', phone)

        // router.push({name:'mine'})
        router.go(-1)

    }else{
        showToast('验证码错误')
    }
}

const RNum = computed(() => {
    let a = " ";
    for (let i = 0; i < 6; i++) {
        a += Math.floor(Math.random() * 10);
    }
    return a;
})
</script>

<template>
    <div>
        <div class="login-view">
            <div class="login-top">
                <img src="../assets/imgs/mine/delete.png" @click="$router.go(-1)">
                <div>帮助</div>
            </div>
            <div class="login-title">登录</div>
            <div class="phone-input">
                <div class="area-code">+86</div>
                <img src="../assets/imgs/mine/a63.png" style="width: 2vw;">
                <input type="text" placeholder="请输入手机号" v-model="phoneCode" @input="confirmPhone"/>
            </div>
            <!-- 验证码 -->
            <div class="code-input">
                <input type="text" placeholder="请输入验证码" v-model="codeNum"/>
                <span v-show="!codeShow&&!showBtn" style="color: #666;">获取验证码</span>
                <span v-show="showBtn&&!codeShow" @click="showSlide = true">获取验证码</span>
                <span v-show="codeShow">{{ count }}秒后重试</span>
            </div>

            <div class="tip">未注册的手机号验证后自动创建账户</div>

            <div class="login-btn" v-show="!showLoginBtn">登录</div>

            <div class="login-btn active" v-show="showLoginBtn" @click="confirmcodeNum">登录</div>
            <div class="other-login">

            </div>
        </div>

        <div class="validation-warpper" v-show="showSlide">
            <div class="validation">
                <slideVerify @showBox="changeShow"/>
            </div>
        </div>

        <div class="sms" v-show="codeinf">【M影城】 登录/注册验证码:{{ RNum }}，请勿转发，转发导致账号被盗，本验证码5分钟有效</div>
    </div>
</template>

<style lang="scss" scoped>
.login-view{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #ffffff;

    .login-top{
        color: #f03d37;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vw 4vw 0 2vw;

        img{
            width: 7vw;
        }
    }
    .login-title{
        color: #333333;
        font-size: 7vw;
        letter-spacing: 1.5vw;
        padding-left: 10vw;
        padding-top: 9vh;
    }
    .phone-input{
        width: 80vw;
        padding: 4vh 0 2vw 0;
        display: flex;
        align-items: center;
        border-bottom: #c2c2c2 1px solid;
        margin:  0 auto;

        .area-code{
            color: #666666;
            font-size: 13px;
            margin-right: 2vw;
        }
        input{
            width: 60vw;
            border: none;
        }
    }

    .code-input{
        width: 80vw;
        padding: 4vh 0 2vw 0;
        border-bottom: #c2c2c2 1px solid;
        margin:  0 auto;

        input{
            width: 60vw;
            border: none;
        }
        span{
            font-size: 12px;
            color: #f03d37;
        }
    }

    .tip{
        color: #666666;
        font-size: 12px;
        line-height: 5vw;
        padding-left: 10vw;
    }

    .login-btn{
        width: 80vw;
        height: 12vw;
        line-height: 12vw;
        text-align: center;
        color: #ffffff;
        margin: 10vw auto;
        border-radius: 3vw;
        background-color: #f9938e;
        
        &.active{
            background-color: #f03d37;
        }
    }
}


.validation-warpper{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);

    .validation{
        width: 310px;
        height: 214px;
        margin: 30vh auto;
    }
}

.sms{
    width: 96vw;
    height: 18vw;
    line-height: 6vw;
    padding: 3vw 4vw;
    margin: 2vw auto;
    box-sizing: border-box;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 2vw;
    box-shadow: 1px 1px 10px -5px #999;
}
</style>